<template>
  <div class="q-git-member">
    <el-row v-if="isOwner">
      <h4>项目成员</h4>
      <span class="git-member-subtitle">添加新用户到 <strong>vue-template</strong> 或将他共享到其它群组。</span>
      <el-tabs v-model="activeName" type="border-card" :stretch="true" @tab-click="GetGroup">
        <el-tab-pane label="添加成员" name="user">
          <el-form ref="memberForm" :model="memberForm" label-position="top" label-width="80px" class="q-member-form">
            <el-form-item label="选择要邀请的成员">
              <el-col :span="24">
                <el-select
                  v-model="memberForm.member"
                  multiple
                  filterable
                  remote
                  placeholder="搜索要更新或邀请的成员"
                  :remote-method="filterMember"
                  :loading="filterLoading"
                  style="width: 100%"
                  size="medium"
                >
                  <!--              todo-->
                  <el-option
                    v-for="item in memberFilterOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                    <el-row style="height:50px;">
                      <el-col :span="1">
                        <img class="member-avatar" :src="item.avatar_url" alt="">
                      </el-col>
                      <el-col :span="1" style="margin-left:15px;">
                        <el-row style="height:25px">
                          {{ item.name }}
                        </el-row>
                        <el-row>
                          {{ item.username }}
                        </el-row>
                      </el-col>
                    </el-row>
                  </el-option>
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="选择角色权限">
              <el-col :span="24">
                <el-select v-model="memberForm.role" style="width: 100%;" size="medium">
                  <el-option
                    v-for="item in roleOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="访问到期日期">
              <el-col>
                <el-date-picker
                  v-model="memberForm.deadline"
                  style="width: 100%"
                  type="date"
                  placeholder="到期日期"
                  size="medium"
                />
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-button
                type="success"
                :disabled="this.memberForm.member.length === 0"
                @click="AddToProjectGroup"
                size="small"
              >添加到项目
              </el-button>
              <el-button @click="dialogImportVisable=true" size="small">导入</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="与群组共享" name="group">
          <el-form ref="groupForm" label-position="top" :model="groupForm" label-width="80px">
            <el-form-item label="选择要共享的群组">
              <el-select
                v-model="groupForm.groupId"
                placeholder=""
                style="width: 100%;"
              >
                <el-option
                  v-for="item in groupOptions"
                  :key="item.id"
                  :label="item.full_name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="最高访问级别">
              <el-select v-model="groupForm.role" style="width: 100%;" size="medium">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="访问到期日期">
              <el-col>
                <el-date-picker
                  v-model="groupForm.deadline"
                  style="width: 100%"
                  type="date"
                  placeholder="到期日期"
                  value-format="yyyy-MM-dd"
                  size="medium"
                />
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-button type="success" :disabled="!this.groupForm.groupId" @click="shareWithGroup">共享</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <h4>现有用户和群组</h4>
    <el-row class="groupp-header">
      <el-col class="name-header" :span="6">可以访问<strong>{{ this.$route.params.pname }}</strong> 的群组
        <el-badge :value="shareGroupNum" type="primary" />
      </el-col>
      <el-col>
        <el-table
          v-loading="listLoading"
          :data="groupList"
          :show-header="false"
          highlight-current-row
        >
          <el-table-column>
            <template slot-scope="{ row }">
              <el-row :gutter="10">
                <el-col :span="3">
                  <el-button type="success" circle>D</el-button>
                </el-col>
                <el-col :span="9" style="padding-top:2px;">
                  <el-row :gutter="10"><strong>{{ row.group_name }}</strong></el-row>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column align="right">
            <!--todo  当前用户不可删除和设置截止日期-->
            <template slot-scope="{ row, $index }">
              <el-select
                v-model="row.group_access_level"
                disabled
                style="margin-top:15px;"
                @change="editMember(row)"
                size="medium"
              >
                <el-option
                  v-for="item in groupRoleOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-button
                v-if="!row.is_owner"
                type="danger"
                icon="el-icon-delete"
                size="medium"
                @click="deleteGroup(row.group_id, $index)"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row class="groupp-header">
      <el-col class="name-header" :span="8"><strong>{{ this.$route.params.pname }}</strong> 的成员
        <el-badge :value="memberNum" type="primary" />
      </el-col>
      <el-col class="search-header" :span="4" offset="11">
        <!--            todo 此处是前模糊搜索-->
        <el-input
          v-model="search"
          size="medium"
          placeholder="请输入内容"
          suffix-icon="el-icon-search"
          @keyup.enter.native="groupMemberList"
        />
      </el-col>
      <el-col>
        <el-table
          v-loading="listLoading"
          :data="memberList"
          :show-header="false"
          highlight-current-row
        >
          <el-table-column>
            <template slot-scope="{ row }">
              <el-row :gutter="10">
                <el-col :span="3"><img class="avatar" :src="row.avatar_url" alt=""></el-col>
                <el-col :span="10" style="padding-top:2px;">
                  <el-row :gutter="10"><strong>{{ row.name }}</strong></el-row>
                  <!--                      <el-row :gutter="10">加入时间 · </el-row>-->
                  <el-row :gutter="10">
                    {{ row.username }}
                  </el-row>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column align="right">
            <template slot-scope="{ row, $index }">
              <el-select
                v-model="row.access_level"
                :disabled="row.is_owner"
                style="margin-top:15px;"
                size="medium"
                @change="editMember(row)"
              >
                <el-option
                  v-for="item in roleOptions"
                  :key="item.value"
                  :disabled="item.value === 50"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-date-picker
                v-if="!row.is_owner"
                v-model="row.expires_at"
                type="date"
                size="medium"
                placeholder="到期日期"
                @change="editMember(row)"
              />
              <el-button
                v-if="!row.is_owner"
                type="danger"
                icon="el-icon-delete"
                size="medium"
                @click="deleteMember(row.id, $index)"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog
      title="选择导入的工程"
      :visible.sync="dialogImportVisable"
      @open="filterProject"
    >
      <el-form :model="importForm">
        <el-form-item>
          <el-select
            v-model="importForm.pid"
            filterable
            remote
            placeholder="搜索要导入的工程"
            :remote-method="filterProject"
            :loading="importLoading"
            style="width: 100%"
            size="medium"
          >
            <el-option
              v-for="item in ProjectFilterOptions"
              :key="item.id"
              :label="item.name_with_namespace"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div style="margin-top:20px;">
        <el-button type="primary" @click="importProjectMember">确 定</el-button>
        <el-button @click="dialogImportVisable = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getData, postData } from '@/api/requestData'
export default {
  data() {
    return {
      importForm: {
        pid: ''
      },
      dialogImportVisable: false,
      isOwner: false,
      filterLoading: false,
      memberFilterOptions: [], // 搜索用户的数据  options
      ProjectFilterOptions: [],
      activeName: 'user',
      search: '',
      memberNum: 0,
      shareGroupNum: 0, // 共享的群组的数量
      memberList: [], // 成员列表
      groupList: [], // 共享群组列表
      listLoading: true,
      importLoading: true, // 导入的工程加载图表
      memberForm: {
        member: [],
        role: '',
        deadline: '',
        pid: ''
      },
      groupForm: {
        groupId: '',
        role: '',
        deadline: ''
      },
      roleOptions: [
        { label: '访客', value: 10 },
        { label: '报告者', value: 20 },
        { label: '开发人员', value: 30 },
        { label: '主程序员', value: 40 }
        // { label: '拥有者', value: 50 }
      ],
      groupRoleOptions: [
        { label: '访客', value: 10 },
        { label: '报告者', value: 20 },
        { label: '开发人员', value: 30 },
        { label: '主程序员', value: 40 }
      ],
      groupOptions: [
        { label: '请选择分享的群组', value: 0 }
      ]
    }
  },
  created() {
    this.memberForm.role = this.roleOptions[0].value
    this.memberForm.pid = this.$route.params.pid
    this.groupForm.role = this.roleOptions[0].value
    this.groupMemberList()
  },
  methods: {
    filterMember(memberName) {
      if (memberName !== '') {
        this.filterLoading = true
        setTimeout(() => {
          getData('git/public/users/list', { 'name': memberName }).then((response) => {
            this.memberFilterOptions = response.data
          })
          this.filterLoading = false
        }, 100)
      } else {
        this.memberFilterOptions = []
      }
    },
    filterProject(pname = '') {
      this.importLoading = true
      setTimeout(() => {
        getData('git/public/project/list', { 'name': pname }).then((response) => {
          this.ProjectFilterOptions = response.data
        })
        this.importLoading = false
      }, 100)
    },
    AddToProjectGroup() {
      this.memberForm.member = this.memberForm.member.join(',')
      postData('/git/add/project/member', this.memberForm).then((response) => {
        this.memberForm.member = []
        this.groupMemberList()
        this.$message.success('添加成功')
        window.location.reload()
      }).catch(() => {
        this.$message.error('添加失败')
      })
    },
    GetGroup() {
      if (this.activeName === 'group') {
        // 获取用户所在的用户组
        getData('/git/public/all/groups').then((response) => {
          this.groupOptions = response.data
        })
      }
    },
    editMember(row) {
      const params = {
        gitUid: row.id,
        accessLevel: row.access_level,
        expireAt: row.expires_at
      }
      if (!row.expires_at) {
        params['expireAt'] = ''
      }
      const pid = this.$route.params.pid
      getData('/git/change/member/role/expire/' + pid, params).then((response) => {
        this.$message.success(response.message)
      }).catch(() => {})
    },
    groupMemberList() {
      const pid = this.$route.params.pid
      getData('/git/project/member/' + pid, { 'query': this.search }).then((response) => {
        this.listLoading = true
        this.memberList = response.data.memberList
        this.memberNum = response.data.memberList.length
        this.groupList = response.data.shareGroup
        this.shareGroupNum = response.data.shareGroup.length
        this.isOwner = response.data.isOwner
        this.listLoading = false
      }).catch(() => {})
    },
    deleteMember(userId, index) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonType: 'warning',
        cancelButtonType: 'text',
        type: 'warning'
      }).then(() => {
        // 确认处理逻辑
        const pid = this.$route.params.pid
        const url = '/git/public/del/project/member/' + pid + '/' + userId
        getData(url).then((response) => {
          this.memberList.splice(index, 1)
          this.$message.success(response.message)
        }).catch(() => {})
      }).catch(() => {
        this.$message.info('取消删除')
      })
    },
    deleteGroup(groupId, index) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonType: 'warning',
        cancelButtonType: 'text',
        type: 'warning'
      }).then(() => {
        const pid = this.$route.params.pid
        getData('/git/delete/share/group/' + pid + '/' + groupId).then((response) => {
          this.shareGroupNum--
          this.groupList.splice(index, 1)
          this.$message.success(response.message)
        }).catch(() => {})
      }).catch(() => {
        this.$message.info('删除失败')
      })
    },
    shareWithGroup() {
      const pid = this.$route.params.pid
      const params = {
        groupId: this.groupForm.groupId,
        accessLevel: this.groupForm.role,
        expiresAt: this.groupForm.deadline
      }
      postData('/git/public/share/with/group/' + pid, params).then((response) => {
        this.$message.success(response.message)
        window.location.reload()
      }).catch(() => {})
    },
    importProjectMember() {
      const importPid = this.importForm.pid
      // 导入成员
      const currentPid = this.$route.params.pid
      const params = {
        currentPid: currentPid,
        importPid: importPid
      }
      getData('/git/import/member/from/project', params).then((response) => {
        this.$message.success(response.message)
        setTimeout(() => {
            window.location.reload()
        }, 1000)
      }).catch(() => {})
      this.dialogImportVisable = false
    }
  }
}
</script>

<style>
.el-tabs__nav.is-stretch {
  height: 50px !important;
}

.el-tabs__item {
  height: 50px;
  line-height: 50px;
}

.q-member-form .el-form-item {
  margin-bottom: 5px;
}

.el-form--label-top .el-form-item__label {
  padding-bottom: 0;
  /*margin-bottom: -5px;*/
}

.el-date-editor.el-input {
  margin-bottom: 15px;
}
</style>
<style scoped>
.name-header {
  height: 50px;
  /* line-height: 50px; */
  margin-left: 20px;
  display: flex;
  align-items: center;
}

.avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
} 

.member-avatar {
  width: 50px;
  height: 50px;
  margin-top: 5px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.search-header {
  margin-top: 5px;
}

.groupp-header {
  background-color: #fafafa;
  /*background-color: #efe8e8;*/
}

.subtitle {
  display: block;
  margin-bottom: 10px;
  margin-top: -10px;
  font-size: smaller;
}
</style>
<style lang="scss" scoped>
.q-git-member {
  h4 {
    color: #333;
  }
  .el-row {
    width: 90%;
  }
  .git-member-subtitle {
    line-height: 48px;
    font-size: 14px;
  }
  & > h4 {
    line-height: 56px;
  }
}
</style>
